<template>
  <a-popover
    trigger="click"
    placement="bottom"
    overlayClassName="share-popover"
    v-model="visible"
  >
    <template slot="content">
      <div class="share-options">
        <div class="share-item" @click="copyLink">
          <a-icon type="link" />
          <span>复制链接</span>
        </div>
        <div class="share-item" @click="shareToWeChat">
          <a-icon type="wechat" />
          <span>分享至微信</span>
        </div>
        <div class="share-item" @click="shareToQQ">
          <a-icon type="qq" />
          <span>分享至QQ</span>
        </div>
      </div>
    </template>
    <span class="share-trigger" @click.stop>
      <slot>
        <a-icon type="share-alt" />
        <span>分享</span>
      </slot>
    </span>
  </a-popover>
</template>

<script>
export default {
  name: 'SharePopover',
  props: {
    title: {
      type: String,
      required: true
    },
    link: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    async copyLink() {
      try {
        // 首先尝试使用 Clipboard API
        if (navigator.clipboard && window.isSecureContext) {
          await navigator.clipboard.writeText(this.link)
          this.$message.success('链接已复制')
          this.visible = false
          return
        }

        // 后备方案: 使用 execCommand
        const textarea = document.createElement('textarea')
        textarea.value = this.link
        textarea.style.position = 'fixed'
        textarea.style.left = '-9999px'
        textarea.style.top = '0'
        document.body.appendChild(textarea)
        textarea.focus()
        textarea.select()
        
        const successful = document.execCommand('copy')
        document.body.removeChild(textarea)

        if (successful) {
          this.$message.success('链接已复制')
          this.visible = false
        } else {
          throw new Error('复制失败')
        }
      } catch (err) {
        console.error('复制失败:', err)
        this.$message.error('复制失败，请手动复制')
        // 显示可选择的文本框作为最后的后备方案
        this.$confirm({
          title: '复制链接',
          content: h => h('div', [
            h('p', '请手动复制以下链接:'),
            h('a-input', {
              props: {
                value: this.link,
                readOnly: true
              },
              style: {
                marginTop: '8px'
              }
            })
          ]),
          okText: '关闭',
          cancelText: null
        })
      }
    },
    shareToWeChat() {
      // 生成分享链接
      const shareUrl = encodeURIComponent(this.link)
      const shareTitle = encodeURIComponent(this.title)
      
      // 打开微信网页版分享
      window.open(`https://wechat.com/share?url=${shareUrl}&title=${shareTitle}`)
      this.visible = false
    },
    shareToQQ() {
      // 生成QQ分享链接
      const shareUrl = encodeURIComponent(this.link)
      const shareTitle = encodeURIComponent(this.title)
      
      // 打开QQ分享页面
      window.open(`https://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&title=${shareTitle}`)
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.share-options {
  min-width: 120px;
  padding: 4px 0;
}

.share-item {
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;

  &:hover {
    background-color: #f5f5f5;
  }

  .anticon {
    font-size: 16px;
  }
}

.share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #666;

  &:hover {
    color: #1890ff;
  }

  .anticon {
    font-size: 16px;
  }
}

// 移动端样式
@media screen and (max-width: 768px) {
  .share-options {
    min-width: 100px;
  }

  .share-item {
    padding: 12px 16px;
    font-size: 14px;
  }
}
</style> 